<template>
  <div>
    <!--侧边栏结束 -->
    <MyChat></MyChat>
    <!-- 头部开始 -->
    <div class="main-header header-style-1 font-heading">
      <div class="header-top">
        <div class="container">
          <div class="row pt-20 pb-20">
            <div class="col-md-3 col-xs-6">
              <!-- <a href=""
                ><el-avatar :size="40" :src="userInfo.avatar"></el-avatar
              ></a> -->
            </div>
            <div class="col-md-9 col-xs-6 text-right header-top-right">
              <span
                class="vertical-divider mr-20 ml-20 d-none d-md-inline"
              ></span>
              <button
                class="search-icon d-none d-md-inline"
                @click="changSearchState"
              >
               <span class="mr-15 text-muted font-small"
                  ><i class="elegant-icon icon_search mr-5"></i>搜索</span
                >
              </button>
              <button
                v-if="Object.keys(userInfo).length === 0"
                class="btn btn-radius bg-primary text-white ml-15 font-small box-shadow"
                @click="login"
              >
                <i class="elegant-icon icon_profile mr-5"></i>登录
              </button>
              <div class="d-flex align-items-center">
                <a @click="openSideBar"  v-if="Object.keys(userInfo).length != 0" class="d-flex align-items-center"><el-avatar :size="40" :src="userInfo.avatar"></el-avatar></a>  
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-sticky">
        <div class="container align-self-center">
          <div class="mobile_menu d-lg-none d-block"></div>
          <div class="main-nav d-none d-lg-block float-left">
            <nav>
              <!--PC端菜单-->
              <ul class="main-menu d-none d-lg-inline font-small">
                <li :class="currentItem('/home')">
                  <router-link to="/home">
                    <i class="elegant-icon icon_house_alt mr-5"></i> 首页</router-link
                  >
                </li>
                <li class="menu-item-has-children">
                  <router-link :to="`/home`">
                    <i class="elegant-icon icon_document mr-5"></i> 文章</router-link
                  >
                  <ul class="sub-menu text-muted font-small current-item">
                    <li class="current-item">
                      <router-link to="/archive">
                        <i class="elegant-icon icon_archive_alt mr-5"></i>
                        归档</router-link
                      >
                    </li>
                    <li :class="currentItem('category')">
                      <router-link to="/category">
                        <i class="elegant-icon icon_grid-3x3 mr-5"></i>
                        分类</router-link
                      >
                    </li>
                    <li :class="currentItem('tag')">
                      <router-link to="/tag"
                        ><i class="elegant-icon icon_tags mr-5"></i>
                        标签</router-link
                      >
                    </li>
                  </ul>
                </li>
                <li class="menu-item-has-children">
                  <router-link to="" :class="currentItem('album')">
                    <i class="elegant-icon icon_images mr-5"></i>
                    相册</router-link
                  >
                  <ul class="sub-menu text-muted font-small">
                    <li v-for="(item,index) in albumList" :key="item.id" >
                      <router-link :to="'/album/' + item.id + '/' + item.albumName"
                        ><i class="elegant-icon icon_image mr-5"></i>
                        {{item.albumName}}</router-link
                      >
                    </li>
                  </ul>
                </li>
                <li :class="currentItem('link')">
                 <router-link to="/link" @click="changeActive('currentFriend')"
                    ><i class="elegant-icon icon_link_alt mr-5"></i>友链</router-link
                  >
                </li>
                <li :class="currentItem('barrage')">
                  <router-link to="/barrage"
                    ><i class="elegant-icon icon_comment mr-5"></i
                    >留言</router-link
                  >
                </li>
                <li :class="currentItem('about')" >
                  <router-link to="/about"
                    ><i class="elegant-icon icon_profile mr-5"></i
                    >关于</router-link
                  >
                </li>
              </ul>
              <!--移动端菜单-->
              <ul id="mobile-menu" class="d-block d-lg-none text-muted">
                <li class="menu-item-has-children" >
                    <router-link to="/home">
                    <i class="elegant-icon icon_house_alt mr-5"></i> 首页</router-link
                  >
                </li>
                <li class="menu-item-has-children">
                  <a href="index.html">
                    <i class="elegant-icon icon_document mr-5"></i> 文章</a
                  >
                  <ul class="sub-menu font-small">
                    <li>
                         <router-link  to="/archive">
                        <i class="elegant-icon icon_archive_alt mr-5"></i>
                        归档</router-link>
                    </li>
                    <li>
                       <router-link to="/category">
                        <i class="elegant-icon icon_grid-3x3 mr-5"></i>
                        分类</router-link
                      >
                    </li>
                    <li>
                       <router-link to="/tag"
                        ><i class="elegant-icon icon_tags mr-5"></i>
                        标签</router-link
                      >
                    </li>
                  </ul>
                </li>
                <li class="menu-item-has-children">
                  <a class="elegant-icon icon_images mr-5">  &nbsp;相册</a>
                  <ul class="sub-menu font-small">
               <li v-for="(item,index) in albumList" :key="item.id" >
                      <router-link :to="'/album/' + item.id + '/' + item.albumName"
                        ><i class="elegant-icon icon_image mr-5"></i>
                        {{item.albumName}}</router-link
                      >
                    </li>
                  </ul>
                </li>
                <li class="menu-item-has-children">
                       <router-link to="/link" @click="changeActive('currentFriend')"
                    ><i class="elegant-icon icon_link_alt mr-5"></i>&nbsp;友链</router-link
                  >
                </li>
                     <li class="menu-item-has-children">
                            <router-link to="/barrage"
                    ><i class="elegant-icon icon_comment mr-5"></i
                    > &nbsp;留言</router-link
                  >
                </li>
                     <li class="menu-item-has-children">
                       <router-link to="/about"
                    ><i class="elegant-icon icon_profile mr-5"></i
                    > &nbsp;关于</router-link
                  >
                </li>
              </ul>
            </nav>
          </div>
          <div class="float-right header-tools text-muted font-small">
            <ul class="header-social-network d-inline-block list-inline mr-15">
                <li class="list-inline-item"><a :href="site.github" target="_blank" rel="noopener noreferrer" class="mt-1"><svg t="1693621639397" class="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3472" width="25" height="25"><path d="M524.979332 0C234.676191 0 0 234.676191 0 524.979332c0 232.068678 150.366597 428.501342 358.967656 498.035028 26.075132 5.215026 35.636014-11.299224 35.636014-25.205961 0-12.168395-0.869171-53.888607-0.869171-97.347161-146.020741 31.290159-176.441729-62.580318-176.441729-62.580318-23.467619-60.841976-58.234462-76.487055-58.234463-76.487055-47.804409-32.15933 3.476684-32.15933 3.476685-32.15933 53.019436 3.476684 80.83291 53.888607 80.83291 53.888607 46.935238 79.963739 122.553122 57.365291 152.97411 43.458554 4.345855-33.897672 18.252593-57.365291 33.028501-70.402857-116.468925-12.168395-239.022047-57.365291-239.022047-259.012982 0-57.365291 20.860106-104.300529 53.888607-140.805715-5.215026-13.037566-23.467619-66.926173 5.215027-139.067372 0 0 44.327725-13.906737 144.282399 53.888607 41.720212-11.299224 86.917108-17.383422 131.244833-17.383422s89.524621 6.084198 131.244833 17.383422C756.178839 203.386032 800.506564 217.29277 800.506564 217.29277c28.682646 72.1412 10.430053 126.029806 5.215026 139.067372 33.897672 36.505185 53.888607 83.440424 53.888607 140.805715 0 201.64769-122.553122 245.975415-239.891218 259.012982 19.121764 16.514251 35.636014 47.804409 35.636015 97.347161 0 70.402857-0.869171 126.898978-0.869172 144.282399 0 13.906737 9.560882 30.420988 35.636015 25.205961 208.601059-69.533686 358.967656-265.96635 358.967655-498.035028C1049.958663 234.676191 814.413301 0 524.979332 0z" fill="#191717" p-id="3473"></path><path d="M199.040177 753.571326c-0.869171 2.607513-5.215026 3.476684-8.691711 1.738342s-6.084198-5.215026-4.345855-7.82254c0.869171-2.607513 5.215026-3.476684 8.691711-1.738342s5.215026 5.215026 4.345855 7.82254z m-6.953369-4.345856M219.900283 777.038945c-2.607513 2.607513-7.82254 0.869171-10.430053-2.607514-3.476684-3.476684-4.345855-8.691711-1.738342-11.299224 2.607513-2.607513 6.953369-0.869171 10.430053 2.607514 3.476684 4.345855 4.345855 9.560882 1.738342 11.299224z m-5.215026-5.215027M240.760389 807.459932c-3.476684 2.607513-8.691711 0-11.299224-4.345855-3.476684-4.345855-3.476684-10.430053 0-12.168395 3.476684-2.607513 8.691711 0 11.299224 4.345855 3.476684 4.345855 3.476684 9.560882 0 12.168395z m0 0M269.443034 837.011749c-2.607513 3.476684-8.691711 2.607513-13.906737-1.738342-4.345855-4.345855-6.084198-10.430053-2.607513-13.037566 2.607513-3.476684 8.691711-2.607513 13.906737 1.738342 4.345855 3.476684 5.215026 9.560882 2.607513 13.037566z m0 0M308.555733 853.526c-0.869171 4.345855-6.953369 6.084198-13.037566 4.345855-6.084198-1.738342-9.560882-6.953369-8.691711-10.430053 0.869171-4.345855 6.953369-6.084198 13.037566-4.345855 6.084198 1.738342 9.560882 6.084198 8.691711 10.430053z m0 0M351.145116 857.002684c0 4.345855-5.215026 7.82254-11.299224 7.82254-6.084198 0-11.299224-3.476684-11.299224-7.82254s5.215026-7.82254 11.299224-7.82254c6.084198 0 11.299224 3.476684 11.299224 7.82254z m0 0M391.126986 850.049315c0.869171 4.345855-3.476684 8.691711-9.560882 9.560882-6.084198 0.869171-11.299224-1.738342-12.168395-6.084197-0.869171-4.345855 3.476684-8.691711 9.560881-9.560882 6.084198-0.869171 11.299224 1.738342 12.168396 6.084197z m0 0" fill="#191717" p-id="3474"></path></svg></a></li>
                <li class="list-inline-item"><a :href="site.gitee" target="_blank" rel="noopener noreferrer" class="mt-1"><svg t="1693621678738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4490" width="25" height="25"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="4491"></path></svg></a></li>
                <li class="list-inline-item"><a :href="site.bilibili" target="_blank" rel="noopener noreferrer" class="mt-1"><svg t="1694688034207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9020" width="25" height="25"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFFFFF" p-id="9021"></path><path d="M743.424 349.44H281.856A25.088 25.088 0 0 0 256 374.208v301.312c0 14.08 11.776 24.512 25.856 24.512h461.568c14.08 0 24.576-10.432 24.576-24.512V374.144a24 24 0 0 0-24.576-24.64zM320 460.8l119.04-24.512 8.96 48.064-117.76 24.512-10.24-48z m191.488 146.432c-30.976 42.88-63.488-13.504-63.488-13.504l16.512-13.568s22.08 50.624 46.72-16.448c23.68 65.152 49.792 17.088 49.792 17.408L576 593.408s-27.968 56.768-64.512 13.824z m182.592-98.368L576 484.352l9.28-48L704 460.8l-9.92 48.064zM512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0z m240.896 760.96c-32-1.024-42.752 0-42.752 0s-2.368 36.672-33.664 37.312c-31.616 0.32-36.352-25.6-37.376-35.328-19.2 0-249.728 1.024-249.728 1.024s-4.032 33.92-35.328 33.92c-31.68 0-33.344-28.16-35.392-33.92-20.48 0-48.128-0.64-48.128-0.64S201.216 748.8 192.128 658.56c1.024-90.24 0-268.672 0-268.672s-6.4-83.136 76.416-107.008A4914.56 4914.56 0 0 1 413.248 281.6l-58.88-57.216s-9.088-11.52 6.4-24.256c15.808-12.8 16.448-7.552 21.888-3.84 5.376 3.648 87.808 84.928 87.808 84.928h-11.072c31.616 0 64.256 0.512 95.616 0.512 12.096-12.096 81.088-79.68 85.76-83.008 5.44-3.392 6.4-9.088 21.952 3.712 15.424 12.8 6.4 24.32 6.4 24.32l-57.6 55.488 140.032 1.024s78.08 17.152 80.128 106.688A20278.4 20278.4 0 0 0 832 659.584s-4.352 87.552-79.104 101.312z" fill="#FB7299" p-id="9022"></path></svg></a></li>
            </ul>
            <div class="off-canvas-toggle-cover d-inline-block">
              <div
                class="off-canvas-toggle hidden d-inline-block"
                id="off-canvas-toggle"
                @click="changSideBarState"
              >
                <span></span>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->
    <!--侧边栏开始 -->
    <MySideBar v-if="Object.keys(userInfo).length != 0"></MySideBar>
  </div>
</template>

<script>
import MyChat from "@/components/MyChat";
import { mapState } from "vuex";
export default {
  name: "",
  components: {
    MyChat,
  },
  data() {
    return {
      bilbili:"",
      github:"",
      gitee:"",
      currentFriend:'',
      currentMessage:'',
      currentAbout:'',
    };
  },
  mounted() {
    //默认关闭侧边栏
    this.closeSideBar();
  },
  methods: {
    //改变搜索状态
    changSearchState() {
      this.$route.path == "/search"
        ? this.$router.go(-1)
        : this.$router.push("/search");
    },
    change(id){
      console.log('testst4eds')
    },
    //侧边栏是否显示
    changSideBarState() {
      if(Object.keys(this.userInfo).length != 0)
      {
      const bodyElement = document.querySelector("body");
      bodyElement.className == "canvas-opened" ? this.closeSideBar() : this.openSideBar();
      }
      else{
        this.$message({
          type:'warning',
          message:'请先登录'
        })
        this.$router.push('/login')
      }
    },
    // 开启侧边栏
    openSideBar() {
      const bodyElement = document.querySelector("body");
      bodyElement.className = "canvas-opened";
    },
    //关闭侧边栏
    closeSideBar() {
      const bodyElement = document.querySelector("body");
      bodyElement.className = "";
    },
    //登录
    login() {
      this.$router.push("/login");
    },
    currentItem(path) {
      // 使用$route对象检查当前路由是否包含"/about"，如果包含则添加 "current-item" 类
      return {
        'current-item': this.$route.path.includes(path)
      };
    }
  },
  computed: {
    ...mapState({
      "userInfo":state => state.user.userInfo,
    }),
    site() {
        return this.$store.state.site.site.siteConfig || {};
    },
    albumList(){
      return this.$store.state.site.site.siteConfig.albumVOList || [];
    }

  },
};
</script>

<style>
</style>